import React,{ useState } from 'react'
import Header from '@c/header/Header'
import { useHistory } from 'react-router-dom'


import {Conback,Container} from '../name/StyledName.js'

import Icon from '@a/images/home/iconerr.png'
import Weixin from '../../assets/images/personal/微信(1)@2x.png'
import Qq from '../../assets/images/personal/qq(绑定）@2x.png'

const Name = (props) => {
    console.log(props.location.state);
    let [state,setState] = useState({
        weixin: props.location.state.weixin,
        qq: props.location.state.qq
    })

    const history = useHistory()

    const handleClick = () => {
        history.push('/personalinfo',state)
    }
    const handleChangeWx = (e) => {
        setState({
            weixin:e.target.value,
            qq:state.qq
        })
    }

    const handleChangeQq = (e) => {
        setState({
            weixin:state.weixin,
            qq:e.target.value
        })
    }
    const handleClearWx = (e) => {
        setState({
            weixin:'',
            qq:state.qq
        })
    }
    const handleClearQq = (e) => {
        setState({
            weixin:state.weixin,
            qq:''
        })
    }

    return (
        <Conback>
            <Header
                title="账号信息"
                onChangeClick={handleClick}
            ></Header>
            <Container>
                <span><img src={Weixin} alt="" style={{width:'.24rem'}} /></span>
                <div>
                    <input type="text" name="weixin" value={state.weixin} onChange={handleChangeWx} autoComplete="off" />
                    <img src={`${Icon}`} alt="" onClick={handleClearWx}/>
                </div>
            </Container>
            <Container>
                <span><img src={Qq} alt="" style={{width:'.24rem'}} /></span>
                <div>
                    <input type="text" name="qq" value={state.qq } onChange={handleChangeQq} autoComplete="off" />
                    <img src={`${Icon}`} alt="" onClick={handleClearQq}/>
                </div>
            </Container>
        </Conback>
    )
}

export default Name